<template>
  <div>
    <button @click="prepareRecording" :disabled="disableButton.start">
      Start Recording
    </button>
    <button @click="stopRecording" :disabled="disableButton.stop">
      Stop Recording
    </button>
    <br />
    <div class="section">
      <div>状态：</div>
      <div>{{ recordingStatus }}</div>
    </div>
    <div class="section">
      <div>最终录音结果：</div>
      <div>{{ resultText }}</div>
    </div>
    <div class="section">
      <div>录音过程：</div>
      <div class="recording">
        <p v-for="(recordText, index) in recordings" :key="index">
          {{ recordText }}
        </p>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from "axios";
import { ref } from "vue";
import CryptoJS from "crypto-js"; //加密库
const prepareRecording = async () => {};
const stopRecording = async () => {};
const recordingStatus = ref("");
const resultText = ref("");
const recordings = ref([]);
const disableButton = ref({
  start: false,
  stop: true,
});
function getISO8601Time() {
  return new Date().toISOString().replace(/\.\d+Z$/, "Z");
}
function getUniqueNonce() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    const r = (Math.random() * 16) | 0;
    const v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}
const accessKeySecret = "rNGW5x7LYi9ZuN9xoUmARYNGnaqjOR";
const queryParamsMap = {
  AccessKeyId: "LTAI5tSMNv3CHV98iVafCUCL",
  Action: "CreateToken",
  Version: "2019-02-28",
  Timestamp: getISO8601Time(),
  Format: "JSON",
  RegionId: "cn-shanghai",
  SignatureMethod: "HMAC-SHA1",
  SignatureVersion: "1.0",
  SignatureNonce: getUniqueNonce(),
};
function canonicalizedQuery(queryParamsMap) {
  const sortedParams = Object.keys(queryParamsMap).sort();
  const encodedParams = sortedParams.map((key) => {
    const value = queryParamsMap[key];
    return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
  });
  return encodedParams.join("&");
}
function createStringToSign(method, urlPath, queryString) {
  return `${method}&${encodeURIComponent(urlPath)}&${encodeURIComponent(
    queryString
  )}`;
}
function sign(stringToSign, accessKeySecret) {
  const signature = CryptoJS.HmacSHA1(stringToSign, accessKeySecret).toString(
    CryptoJS.enc.Base64
  );
  console.log("计算得到的签名：", signature);
  const signUrlEncode = encodeURIComponent(signature);
  console.log("UrlEncode编码后的签名：", signUrlEncode);
  return signUrlEncode;
}
const getToken = () => {
  let url = "http://nls-meta.cn-shanghai.aliyuncs.com/";
  const queryString = canonicalizedQuery(queryParamsMap);
  const method = "GET";
  const urlPath = "/";
  const stringToSign = createStringToSign(method, urlPath, queryString);
  const signature = sign(stringToSign, accessKeySecret + "&");
  const queryStringWithSign = `Signature=${signature}&${queryString}`;
  console.log("signature", signature);
  const fullUrl = url + "?" + queryStringWithSign;
  axios({
    url: fullUrl,
    method: "GET",
  }).then((res) => {
    console.log("demo", res);
  });
};
getToken();
</script>
